<style>
  .account-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      :title="title"
      @on-close="cancel"
      width="35%">
      <Form
        ref="accountDrawer"
        :rules="ruleValidate"
        :model="row"
        :label-width="110">
        <div style="margin-left: 60px; margin-top: 40px;">
          <FormItem prop="tel" label="登录账号：" style="width: 300px;">
            <Input v-model="row.tel" type="text" placeholder="请输入登录账号" />
          </FormItem>
          <FormItem prop="password" label="密码：" style="width: 300px;">
            <Input v-model="row.password" type="text" placeholder="请输入密码" />
          </FormItem>
          <FormItem prop="uname" label="姓名：" style="width: 300px;">
            <Input v-model="row.uname" type="text" placeholder="请输入姓名" />
          </FormItem>
          <FormItem prop="role" label="所属角色：" style="width: 300px;">
            <Select v-model="row.role" placeholder="请选择所属角色" clearable>
              <Option v-for="item in roleList" :value="item.role.toString()" :key="item.id">
                {{ item.gname }}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="openState" label="是否开启：" style="width: 300px;">
            <i-switch v-model="row.openState" style="margin-left: 30px;" />
          </FormItem>
        </div>
      </Form>
      <div class="account-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" @click="handleSubmit">保存</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'AccountDrawer',
  props: {
    password: ''
  },
  data () {
    return {
      title: '',
      loading: true,
      form: {
        password: ''
      },
      ruleValidate: {
        tel: [
          {
            required: true,
            message: '登录账号不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ],
        uname: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        role: [
          {
            required: true,
            message: '请选择所属角色',
            trigger: 'change'
          }
        ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '编辑账户'
    } else {
      this.title = '添加账户'
    }
  },
  computed: {
    ...mapState({
      row: state => state.account.row,
      modalState: state => state.modal.customerDrawerState,
      roleList: state => state.role.roleList
    })
  },
  methods: {
    ...mapActions(['updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.accountDrawer.validate((valid) => {
        if (valid) {
          this.$emit('account-valid', {
            id: this.row.id,
            tel: this.row.tel,
            password: this.row.password !== this.password ? this.row.password : '',
            uname: this.row.uname,
            role: this.row.role ? parseInt(this.row.role) : '',
            state: this.row.openState === true ? 0 : 1
          })
        }
      })
    },
    cancel () {
      this.updateCustomerDrawerState(false)
      this.$refs['accountDrawer'].resetFields()
    }
  }
}
</script>
